<template>
  <div>
    <Row type="flex" justify="end" >
      <Col span="3">
      <MenuItem class="sr_tools" name="" style="margin-top: 15px">
        <router-link to="/washAdd">    <Button type="primary" icon="plus-circled"></Icon>新增</Button>
        </router-link>
      </MenuItem>
      </Col>
    </Row>
    <Table ref="washtable" :columns="columns" :data="tableData" class="table_wrapper"  id="table_wrapper" ></Table>


    <Modal v-model="modal_del" width="360"  class-name="vertical-center-modal" >

      <p slot="header" style="text-align:center">
        <span>洗衣机</span>
      </p>
      <div style="text-align:center">
        <p>真的要删除吗？删除将无法看到洗衣详情</p>
      </div>
      <div slot="footer">
        <i-button type="error"  @click="deleteOk">是</i-button>
        <i-button type="default"  @click="deleteCancel">否</i-button>
      </div>

    </Modal>
  </div>
</template>
<script>
  import {WashListApi} from "../../../static/api/api";

  export default {
   data(){
     return{
       perSee:false,
       perDel:false,
       perEdit:false,
       modal_del:false,
         washId:"",
       delId:'',
       columns:[
         {title: 'ID', key: 'id'},
         {title: '设备ID', key: 'deviceId'},
         {title: '名称', key: 'name'},
         {title: '状态', key: 'status'},
         {title: '地址', key: 'location',width:200},
         {title: '纬度', key: 'latitude'},
         {title: '经度', key: 'longitude'},
         {title: '设备类型', key: 'deviceType'},
         {title: '设备代码模式', key: 'deviceCodeMode'},
         {title: '操作', key: 'action',align: 'center',width:300,
           render: (h, params) => {
             return[
               this.delBtn(h, params),
               this.editBtn(h, params)
             ]
           }
         },
       ],
       tableData:[]
     }
   },
   mounted:function () {
    this.$nextTick(function () {
      this.getWashList();
    })
   },
   watch:{},
   methods:{
     getWashList(){
       WashListApi.washList().then(response=>{
         console.log(response);
         response.map( (v,i)=>{

           this.tableData.push({
             id:v.id,
             deviceId:v.deviceId,
             name:v.name,
             status:v.status,
             location:v.location,
             latitude:v.latitude,
             longitude:v.longitude,
             deviceType:v.deviceType,
             deviceCodeMode:v.deviceCodeMode
           })
         })
       }).catch(err=>{

       })
     },
     unPerBtn(h, params,text){
       return h('span', {
         props: {type: 'info', size: 'small',},
         style: {marginRight: '8px',cursor:'pointer',color:'#ccc'},
       }, text)
     },
     seeBtn(h, params){
       return h('span', {
         props: {type: 'info', size: 'small',},
         style: {marginRight: '8px',cursor:'pointer',color:'#229ddd'},
         on: {
           click: () => {
             //this.$router.push({path: 'shopSee',query:{id:this.tableData[params.index].id}});
           }
         }
       }, '查看')
     },
     delBtn(h, params){
       return h('span', {
         props: {type: 'info', size: 'small',},
         style: {marginRight: '8px',cursor:'pointer',color:'#229ddd'},
         on: {
           click: () => {
             this.modalDel(params.index);

           }
         }
       }, '删除')
     },
     editBtn(h, params){
       return h('span', {
         props: {type: 'info', size: 'small',},
         style: {marginRight: '8px',cursor:'pointer',color:'#229ddd'},
         on: {
           click: () => {
             this.$router.push({path: 'washEdit',query:{id:this.tableData[params.index].id}});
           }
         }
       }, '编辑')
     },
     deleteOk(){
         this.modal_del=false;
         var formdata = new FormData();
         formdata.append('id', this.washId);
         WashListApi.delete(formdata).then(res=>{
           this.tableData.splice(this.delId, 1);

          /* if(res.status=='200'){
             //this.$Message.success('Success!');
           }*/

         }).catch(err=>{
             this.$Message.error('删除失败!');
         })
     },
     deleteCancel(){
         this.modal_del=false;
     },
     modalDel(index){
       this.modal_del=true;
       this.delId=index;
       this.washId=this.tableData[index].id;
     },
   }

 }
</script>

<style>
  .table_wrapper{width:100%;padding-bottom: 50px;border-bottom: none;margin-top: 10px}
  .ivu-table-body {overflow: hidden !important;}
</style>

